Quasar is a popular Vue UI library for developing good looking Vue apps.
In this article, we’ll take a look at how to create Vue apps with the Quasar UI library.
Reverse Slider
We can reverse the slider with the reverse prop.
For instance, we can write:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-badge color="primary" class="q-mb-lg">
{{ model }}
</q-badge>
<q-slider
v-model="model"
color="secondary"
:min="0"
:max="50"
reverse
>
</q-slider>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
model: 0
}
});
</script>
</body>
</html>
Slider on a Dark Background
We can add a slider on a background with the dark prop:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md bg-grey-10 text-white">
<q-badge color="primary" class="q-mb-lg">
{{ model }}
</q-badge>
<q-slider v-model="model" color="secondary" :min="0" :max="50" dark>
</q-slider>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
model: 0
}
});
</script>
</body>
</html>
We make the background dark with the bg-grey-10 class.
The text-white class makes the text white.
Read Only and Disabled Slider
We can add the readonly or disable prop to disable the slider.
disable changes the style, but readonly doesn’t.
For example, we can write:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-badge color="primary" class="q-mb-lg">
{{ model }}
</q-badge>
<q-slider
v-model="model"
color="secondary"
:min="0"
:max="50"
disable
>
</q-slider>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
model: 0
}
});
</script>
</body>
</html>
Slider in a List Item
We can add a slider inside the q-item-section component to display it in a list item.
For example, we can write:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-list dense>
<q-item>
<q-item-section avatar>
<q-icon color="teal" name="volume_up" />
</q-item-section>
<q-item-section>
<q-slider
v-model="volume"
:min="0"
:max="10"
label
color="teal"
>
</q-slider>
</q-item-section>
</q-item>
</q-list>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
volume: 0
}
});
</script>
</body>
</html>
We add q-item-section inside a q-item to display it in a list item.
The avatar prop lets us add an avatar.
Conclusion
We can add a reverse slider and add sliders inside a list item with Quasar.
